<template>
  <div class="box">
    <div class="pre-box">
      <h1>TRCC</h1>
      <p>Json com</p>
      <div class="img-box">
        <img src="../image/previe.gif" alt="">
      </div>

    </div>
    <div class="register-form">
      <div class="title-box">
        <h1></h1>
      </div>
      <div class="input-box">
        <input type="text" placeholder="用户名">
        <input type="password" placeholder="密码">
        <input type="password" placeholder="确认密码">
      </div>
      <div class="btn-box">
        <button>注册</button>
        <p>已有账号?去登陆</p>
      </div>
    </div>
    <div class="login-form">
      <div class="title-box">
        <h1></h1>
      </div>
      <div class="input-box">
        <input type="text" v-model="loginForm.username" placeholder="亲，请输入用户名">
        <input type="password" v-model="loginForm.password" placeholder="亲，请输入密码">
      </div>
      <div class="btn-box">
        <button @click="submitForm()">登陆</button>
        <p @click="mySwith">没有账号?去注册</p>
      </div>
    </div>
  </div>
</template>
<script>
import $http from '@/http/base';
import CryptoJS from "crypto-js";
export default {
    name:'boxVue',
    data(){
      return{
        captchaUrl: "",
          loginForm:{
              username:"",
              password:"",
              code:'',
              key:"", // 密钥
                Passwordjmxx:"",
                passwordmw:"",//解密后的明文
                ZSname:"",
                uid:"",
          },
          checked: true,
      }
  },
    methods:{
         //提交登录
         submitForm() { 
            if(this.loginForm.username != "" && this.loginForm.password != ""){
                $http
                .get('api/rbac_User/UserSelect?uname='+this.loginForm.username)
                .then(res =>{
                    console.log("查询的结果为:")
                    console.log(res)
                    console.log(res.u_Password)
                    this.decrypt(res.u_Password);
                    this.ZSname = res.u_Name;
                    this.logname = res.u_UserName
                    this.uid = res.u_Id;
                    this.passwordmw = this.Passwordjmxx;
                    console.log("解密信息" + this.passwordmw);
                    console.log("输入信息" + this.loginForm.password);

                    if(JSON.stringify(this.passwordmw) == JSON.stringify(this.loginForm.password))
                    {
                         //主页跳转
                        this.$message({
                            message: "登陆成功",
                            type: "success",
                        });
                        //用户真实姓名存储
                        localStorage.setItem("UName", this.ZSname);
                        localStorage.setItem("logname", this.logname);
                        //用户id存储

                        this.$router.push("mainba");
                    }else{
                        this.$message.error("账号或密码错误");
                    }
                })
            }
        },
        //解密方法
        decrypt(xx) {
            // 使用 AES 解密算法和 CBC 模式进行解密
            this.key = "my-secret-key"
            const decrypted = CryptoJS.AES.decrypt(xx, this.key).toString(
                CryptoJS.enc.Utf8
            );
            this.Passwordjmxx = decrypted;
            console.log(this.Passwordjmxx)
        },
      mySwith()
      {
        let flag=true;
        if (flag) {
          $("pre-box").css("transform","translateX(100%)")
          $("pre-box").css("backgrouund-color","#c9e0ed")
          $(".img").attr("src","../image/preview.jpg")
        }
        else
        {
          $("pre-box").css("transform","translateX(0%)")
          $("pre-box").css("backgrouund-color","#edd4dc")
          $(".img").attr("src","../image/previe.gif")
        }
      },



        
          
          
       
    }
}
</script>
<style scoped>
@import url('@/assets/usa.css');
.box{
  margin-top: 140px;
}
</style>
